<template>
    <div>
    <el-card>
      <el-row>
        <div v-show="isShow==1">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addcate"
          >添加属性</el-button
        >
        </div>
        <div v-show="isShow==2">
        <el-form :inline="true" ref="form" label-width="80px" :model="categoryInfo">
          <el-form-item label="属性名">
            <el-input
              placeholder="请输入属性名"
              v-model="categoryInfo.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="级别">
            <el-radio-group v-model="categoryInfo.level">
                <el-radio label=1 border=""></el-radio>
                <el-radio label=2 border=""></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="父类" v-if="categoryInfo.level==2">
            <el-input
              placeholder="请输入父类"
              v-model="categoryInfo.dadId"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addValue"
          :disabled="!categoryInfo.name"
          >添加属性值</el-button
        >
        <el-button @click="isShow = 1">取消</el-button>
        </div>
        <div v-show="isShow==3">
        <el-form :inline="true" ref="form2" label-width="80px" :model="newInfo">
          <el-form-item label="新属性名">
            <el-input
              placeholder="请输入新的属性名"
              v-model="newInfo.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="editName"
          :disabled="!newInfo.name"
          >保存</el-button
        >
        <el-button @click="isShow = 1">取消</el-button>
        </div>
      </el-row>
    </el-card>
        <el-card>
      <tree-table :data="option1" :columns="columns" :selection-type="false" :expand-type="false" show-index border>
        <template slot="cid" slot-scope="scope">
          <a size="mini">{{ scope.row.id }}</a>
        </template>
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-error" style="color: red" v-if="scope.row.level === 1"></i>
          <i class="el-icon-success" style="color: lightgreen" v-else></i>
        </template>
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.level === 1">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.level === 2">二级</el-tag>
        </template>
        <template slot="operater" slot-scope="scope" >
          <el-button size="mini" type="primary" class="el-icon-edit" @click="editValue(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" class="el-icon-delete"  @click="delValue(scope.row.id)">删除</el-button>
        </template>
      </tree-table>
    </el-card>
  </div>
  </template>
  
  <script>
  export default {
    inject:['reload'],
    name: "Category",
    data() {
      return {
        isShow: 1,
        newInfo:{
            name:'',
            id:1
        },
        categoryInfo:{
            name:'',
            level:'',
            dadId:0
        },
        options:[],
        option1: [],
        optionProps:{
              value:'id',
              label:'name',
              children:'children'
        },
        columns: [
        {
          label: '分类名称',
          prop: 'name',
        },
        {
          label: 'id',
          type: 'template',
          template: 'cid',
        },
        {
          label: '是否可删除',
          type: 'template',
          template: 'isOk',
        },
        {
          label: '排序',
          type: 'template',
          template: 'order',
        },
        {
          label: '操作',
          type: 'template',
          template: 'operater',
        },
      ],
      };
    },
    methods: {
        async getOptions(){
        await this.$axios.get('/api/axeTypes').then(res =>{
                this.options=res.data.data
                //console.log(this.options)
              }).catch(error =>{
               // console.log('提交失败')
                console.log(error )
              })
       },
       handleChange(value) {
        //console.log(value[0]);
      },
        async addValue() {
            const cd=new FormData()
            cd.append('name',this.categoryInfo.name)
            cd.append('level',this.categoryInfo.level)
            cd.append('dadId',this.categoryInfo.dadId)
            await this.$axios.put("/api/axeType",cd).then(res =>{
               alert("添加成功")
                this.reload()
              }).catch(error =>{
                console.log('提交失败')
              })
        },
        addcate() {
            this.isShow = 2;
        },
        async delValue(row){
            await this.$axios.delete("/api/axeType?id="+row).then(res =>{
                if(res.data.code==200){
                    alert("删除成功")
                    this.reload()
                }else{
                    //console.log(res.data)
                }
              }).catch(error =>{
                console.log('删除失败')
              })
        },
        editValue(row){
            this.newInfo.id=row
            this.isShow=3
        },
        async editName(){
            const ed = new FormData()
            ed.append("id",this.newInfo.id)
            ed.append("name",this.newInfo.name)
            await this.$axios.post("/api/axeType",ed).then(res =>{
                if(res.data.code==200){
                    alert("修改成功")
                    this.reload()
                }else{
                    console.log(res.data)
                }
              }).catch(error =>{
                console.log('修改失败')
              })
        }
    },
    mounted(){
      this.getOptions()
      setTimeout(()=>{
        let a = 1
        for(a=0;a<this.options.length;a++){
          let b={}
         b.id=this.options[a].level1.id
         b.name=this.options[a].level1.name
         b.level=this.options[a].level1.level
         b.dadId=this.options[a].level1.dadId
          b.children=this.options[a].level2s
          this.option1.push(b)
        }
        //console.log(this.option1)
      },800)
    }
  };
  </script>
  
  <style scoped>
  </style>
  